<template>
  <div class="KLive-detail" v-title :data-title="$t('router.KLiveDetailTitle')">
    <Breadcrumb></Breadcrumb>
    <div id="banner-box">
      <div class="k_logo">
        <div class="k_logopic">
          <el-image
            :src="require('@/assets/images/wyn_logo1.png')"
            fit="fill"
          ></el-image>
        </div>
        <div class="k_logoword">
          <p v-html="$t('main.enjoyMusical')"></p>
        </div>
      </div>
      <div class="main">
        <div class="content">
          <div class="vPlayer">
            <videoplayer
              ref="myChild"
              v-if="list.liveStatus == 1 || list.liveStatus == 2"
              :mp4Url="list.liveStatus == 1 ? list.liveUrl : list.replayUrl"
              :mp4Pic="list.posterImage"
              :isDpi="false"
            ></videoplayer>
            <div class="notLive-box" v-else>
              <span v-text="$t('main.showWayPleaseStayTuned')"></span>
            </div>
          </div>
          <div class="live-title">
            <p
              class="title-name ellipsis"
              v-text="
                $i18n.locale === 'zh'
                  ? list.zhName || list.enName
                  : list.enName || list.zhName
              "
            ></p>
            <div class="title-date">
              <p v-text="list.playPlace"></p>
              <span v-text="list.startPlayTime"></span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <el-tabs class="box tab-content" v-model="activeName">
      <el-tab-pane
        :label="$t('main.programIntroduction')"
        name="first"
        class="first"
        v-if="list.summary"
      >
        <p :class="isIntroduce ? '' : 'ellipsis-two'" v-html="list.summary"></p>
        <div
          class="unfold"
          v-show="list.summary"
          @click="isIntroduce = !isIntroduce"
        >
          <i :class="isIntroduce ? 'el-icon-minus' : 'el-icon-plus'"></i>
          {{ isIntroduce ? $t("main.putAway") : $t("main.open") }}
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import Breadcrumb from "@/components/common/Breadcrumb/Index";
import videoplayer from "@/components/common/videoPlayer/Index";
export default {
  data() {
    return {
      list: {}, //节目列表
      activeName: "first",
      isIntroduce: false, //节目介绍-是否展开
    };
  },
  components: {
    Breadcrumb,
    videoplayer,
  },
  computed: {},
  mounted() {
    this.getLiveInfo();
  },
  methods: {
    // 获取节目列表并设置背景图
    async getLiveInfo() {
      try {
        let params = {
          id: this.$route.params.id,
        };
        let res = await this.$api.KLive.getLiveInfo(params);
        if (res.code === 1000000) {
          this.list = res.source;
        }
      } catch (e) {
        console.log(e);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.KLive-detail {
  #banner-box {
    width: 100%;
    height: 1000px;
    position: absolute;
    left: 0;
    top: calc(60px + 60px + 20px + 5px);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    -moz-background-size: 100% 100%;
    background-image: url(../../../assets/images/klive_bg.png);
    > .k_logo {
      width: 1200px;
      margin: auto;
      display: flex;
      align-items: center;
      .k_logopic {
        .el-image {
          width: 360px;
          height: 182px;
          margin-left: 70px;
        }
      }
      .k_logoword {
        line-height: 50px;
        font-size: 34px;
        letter-spacing: 6px;
        color: #fff;
      }
    }
    > .main {
      width: 100%;
      height: 770px;
      position: absolute;
      left: 0;
      .content {
        width: 1200px;
        margin: 20px auto;
        .vPlayer {
          .notLive-box {
            width: 100%;
            height: 640px;
            margin: 0 auto;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 3px solid #908b8b;
            border-radius: 10px;
            font-size: 40px;
            color: #fff;
          }
        }
        .live-title {
          color: #fff;
          .title-name {
            font-size: 26px;
            margin: 15px 0;
            letter-spacing: 3px;
          }
          .title-date {
            display: flex;
            justify-content: space-between;
            align-items: center;
            > p {
              font-size: 20px;
            }
          }
        }
      }
    }
  }
  .tab-content {
    margin-top: 1030px;
    .el-tabs__content {
      .el-tab-pane {
        margin-top: 8px;
        > ul {
          > li {
            display: flex;
            align-items: flex-start;
            margin-bottom: 16px;
            line-height: 26px;
            color: #000;
            > span {
              white-space: nowrap;
            }
            p {
              display: flex;
              flex-wrap: wrap;
              > span {
                margin-right: 18px;
              }
            }
          }
        }
        .unfold {
          color: #999999;
          font-size: 16px;
          margin-top: 8px;
          cursor: pointer;
        }
      }
    }
  }
}
</style>
